<template>
	<view class="content">
		<view class="uni-flex uni-row uni-box" style="height: 210rpx; background-color: #FFFFFF;" v-show="hidestation">
			<image src="../../static/logo.png" mode="scaleToFill" class="shopicon" ></image>
			<view class="shoptt">
				<text class="shopname">牛排</text>
				<view class="uni-flex uni-row">
					<view class="uni-status">
						营业中
					</view>
					<text class="opentime">10:00-21:00</text>
					<text class="desknum">当前小桌：01</text>
				</view>
			</view>
		</view>
		<view class="uni-body">
			<view class="body_header">
				<view class="body_header_item">
					菜品
				</view>
				<view class="body_header_item" style="margin-left: 90rpx; color: #999999;">
					商家
				</view>
				<view class="kb" style="flex-grow: 1;">
				</view>
				<image src="../../static/icon_search.png" mode="scaleToFill" class="searchicon" @click="gosearch"></image>
			</view>
			<view class="body_header" v-show="hidestation">
				<image src="../../static/icon_tuijian.png" mode="scaleToFill" class="support-dishpic"></image>
				<text class="shopname" style="font-size: 32rpx;">本地推荐菜(12)</text>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" v-show="hidestation" :show-scrollbar="false">
				<view id="demo1" class="scroll-view-item_H" v-for="(item, index) in list">
					<view class="good-item">
						<image :src="item.img" mode="scaleToFill"></image>
						<text>{{item.name}}</text>
						<view class="scroll-view-b">
							<text>￥{{item.price}}</text>
							<image src="../../static/btn_red_normal.png" mode="widthFix"></image>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>


		<view class="body_bt" :style="{height:navHeight+'rpx'}">

			<!-- 左边 -->
			<scroll-view scroll-y="true" class="body_blf" :show-scrollbar="false">
				<block v-for="(item,index) in leftNav" :key="index">
					<view class="blft_cate" :class="index==selectItem ? 'selview' : ''" @tap="tapindex" :data-id="item.id">
						<image src="../../static/menu_label_icon_red.png" mode="scaleToFill" v-if="index==selectItem" class="selectimage"></image>
						<view class="blft_cate_name" :class="index==selectItem ? 'rredcolor' : ''">
							<text>{{item.name}}</text>
						</view>
						<view class="blft_cate_num" v-if="item.sum>0">{{item.sum}}</view>
					</view>
				</block>
			</scroll-view>
			<!-- 右边 -->

			<scroll-view scroll-y="true" class="body_brt" style="height: 100%;" scroll-with-animation :scroll-into-view="'main-'+ mainCur"
			 @scroll="noScroll">
			
				<text class="brt_ttl">蔬菜标题</text>
				<block v-for="(item,index) in rightNav" :key="index" >
					<view class="blft_item"  :id="'main-'+ index">
						<image src="../../static/header.png" mode="scaleToFill" class="goodimag"></image>
						<view class="blft_right">
							<view class="blft_right_top">
								<text class="blt_name">{{item.name}}</text>
								<text class="blt_spice">/例</text>
							</view>
							<view class="blft_right_botton">
								<view class="blft_right_botton_left">
									<text class="price_title">会员价</text>
									<text class="price_tt">50</text>
									<text class="price_title" style="color: #999999;text-decoration: line-through;">￥60</text>
								</view>
								<view class="good_add">
									<image src="../../static/btn_gray_normal.png" mode="scaleToFill" style="z-index: 100;" :class="rightListSum[index].delAnimation ? 'delRightShoppingCardAnimations' : 'delLeftShoppingCardAnimations'"
									 v-if="rightListSum[index].showDel" @click="delShoppingCard(index)"></image>
									<text v-if="rightListSum[index].showDel">{{rightListSum[index].sum}}</text>
									<image src="../../static/btn_red_normal.png" mode="scaleToFill" :data-index="index" :data-md="mainCur" @click="addShoppingCard"></image>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<!-- 小球动画 -->
			<view :animation="animationY" :style="'position:fixed;top:' + ballY + 'px;'" v-if="showBall">
				<view class="ball" :animation="animationX" :style="'position:fixed;left:' + ballX + 'px;'">1</view>
			</view>
			<!-- </view> -->
			<view class="tabbar-view" id="hd-height">
				<view class="categ" :class="shoppingCartAnimation? 'shoppingCartAnimations' : '' " @click="showcart">
					<text v-if="cartgoodsNum>0">{{cartgoodsNum}}</text>
					<image src="../../static/icon_shop.png" mode="scaleToFill" :class="cartgoodsNum==0?'capst':'nomalcapst'"></image>
				</view>
				<text class="hej">合计</text>
				<text class="money">{{cartgoodsNum>0?cartgoodsNum+'00':0}}</text>
				<view class="tabbtn" @click="gotoorder">
					选好了
				</view>
			</view>
		</view>
		<shopcart v-if="cartflag">
		</shopcart>

	</view>
</template>

<script>
	import shopcart from "../../components/shopcart.vue";
	export default {
		components: {
			shopcart
		},
		data() {
			return {
				iconType: 'search',
				list: [{
					img: '../../static/logo.png',
					name: '西冷牛排西冷西…',
					price: '10'
				}, {
					img: '../../static/header.png',
					name: '西冷牛排西冷西…',
					price: '10'
				}, {
					img: '../../static/header.png',
					name: '西冷牛排西冷西…',
					price: '10'
				}, {
					img: '../../static/header.png',
					name: '西冷牛排西冷西…',
					price: '10'
				}],
				selectItem: 0,
				hidestation: true,
				pH: 0, //窗口高度
				navHeight: 0, //元素的所需高度,
				goodArr: [1, 2, 3, 4, 5, 6],
				
				//动画属性
				rightListSum: [

					{

						showDel: false,

						delAnimation: false, // 删除动画

						sum: 0,

					}

				],
				cartgoodsNum:0,

				showShoppingCart: true, // 购物车显示

				shoppingCartAnimation: false, // 购物车动画

				showBall: false, // 小球是否显示

				animationY: '', // 动画Y

				animationX: '', // 动画X

				ballY: '', // 小球当前位置Y

				ballX: '', // 小球当前位置X

				leftNav: [

					{

						name: '菜单1',

						id: 0,
						sum:0

					},

					{

						name: '菜单2',

						id: 1,
sum:0
					},

					{

						name: '菜单3',

						id: 2,
sum:0
					},

					{

						name: '菜单4',

						id: 3,
sum:0
					},

					{

						name: '菜单5',

						id: 4,
						sum:0

					}

				],

				rightNav: [

					{

						name: '菜1',

						id: 0

					},

					{

						name: '菜2',

						id: 1

					},

					{

						name: '菜3',

						id: 2

					},

					{

						name: '菜4',

						id: 3

					},

					{

						name: '菜5',

						id: 4

					},

					{

						name: '菜6',

						id: 5

					},

					{

						name: '菜7',

						id: 6

					}

				],



				mainCur: 0,

				listHeight: [], // 左边列表高度

				scrollY: '',
				cartflag:false

			}
		},
	
		onLoad() {
			this.calculateHeight();
		},

		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let w = res.windowWidth;
					var p = 750 / w;
					that._data.navHeight = p * that._data.pH - 190
					// let titleH = uni.createSelectorQuery().select(".body_bt"); //想要获取高度的元素名（class/id）
					// titleH.boundingClientRect(data=>{	
					// 				let pH=that._data.pH; 
					// 				that._data.navHeight=pH-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					// 	}).exec()
				}
			})
		},

		methods: {
			gosearch(){
				console.log('执行了');
				uni.navigateTo({
					url: "../../../search"
				})
			},
			gotoorder(){
				uni.navigateTo({
				    url: "../../../pushorder"
				});
			},
			showcart(){
				console.log('执行了');
				var cart = this.cartflag;
				this.cartflag = !cart;
				
			},
			tapindex(e) {
				console.log(e)

				console.log(e.currentTarget.dataset.id)

				this.selectItem = e.currentTarget.dataset.id // 下标选中

				this.mainCur = e.currentTarget.dataset.id // 右边锚点

				console.log(this.mainCur)

			},
			onPullDownRefresh() {
				console.log('执行了')
				this.hidestation = true;
				uni.stopPullDownRefresh();
			},
			onReachBottom() {
				console.log('到底了');
				this.hidestation = false
			},
			// 删除购物车		
			async delShoppingCard(index) {
				console.log(index);
				if (this.rightListSum[index].sum - 1 <= 0) {
					this.rightListSum[index].sum = this.rightListSum[index].sum - 1;
					this.rightListSum[index].delAnimation = false
					this.setDelayTime(100).then(() => {
						this.rightListSum[index].showDel = false
					})
				} else {
					this.rightListSum[index].sum = this.rightListSum[index].sum - 1
					
				}
				let maodian =this.rightNav[index].id;
				this.leftNav[maodian].sum = this.leftNav[maodian].sum-1
				this.$nextTick(function(){
					this.cartgoodsNum -=1;
				})
				
			},
			// 添加购物车			
			addShoppingCard(e) {
				let index = e.currentTarget.dataset.index;
				let maodian =this.rightNav[index].id;
				this.leftNav[maodian].sum = this.leftNav[maodian].sum+1
				this.rightListSum[index].sum = this.rightListSum[index].sum + 1
				this.rightListSum[index].delAnimation = true
				this.rightListSum[index].showDel = true
				// x, y表示手指点击横纵坐标, 即小球的起始坐标		
				let ballX = e.detail.x,
					ballY = e.detail.y;
				this.createAnimation(ballX, ballY);
				this.$nextTick(function(){
					this.cartgoodsNum +=1;
				})
			},
			// 延迟执行

			setDelayTime(sec) {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve()
					}, sec)
				});
			},
			// 创建动画		
			createAnimation(ballX, ballY) {
				uni.getSystemInfo({
					success: async (e) => {
						// var bottomX = e.windowWidth; // 结束位置X				
						var bottomX = 50; // 结束位置X					
						var bottomY = e.windowHeight - 50; // 结束位置Y		
						var animationX = this.flyX(bottomX, ballX); // 创建小球水平动画			
						var animationY = this.flyY(bottomY, ballY); // 创建小球垂直动画		
						this.ballX = ballX; // 小球当前位置X				
						this.ballY = ballY; // 小球当前位置Y				
						this.showBall = true; // 显示小球		
						this.setDelayTime(100).then(() => {
							this.animationX = animationX.export(); // 执行动画X			
							this.animationY = animationY.export(); // 执行动画Y			
							// 400ms延时, 即小球的抛物线时长						
							return this.setDelayTime(400);
						}).then(() => {
							this.animationX = this.flyX(0, 0, 0).export(); // 执行动画X			
							this.animationY = this.flyY(0, 0, 0).export(); // 执行动画Y							
							this.showBall = false; // 隐藏小球					
							this.shoppingCartAnimation = true // 购物车动画			
							// 400ms延时, 即小球的抛物线时长					
							return this.setDelayTime(400);
						}).then(() => {
							this.shoppingCartAnimation = false // 购物车动画		
						})
					},
				})

			},
			// 水平动画			
			flyX(bottomX, ballX, duration) {
				/**				 * bottomX 结束位置				 * ballX 开始位置				 * duration 动画持续时间				 */
				let animation = uni.createAnimation({
					duration: duration || 400,
					timingFunction: 'linear',
				})
				animation.translateX(bottomX - ballX).step(); // 动画效果		
				return animation;
			},
			// 垂直动画			
			flyY(bottomY, ballY, duration) {
				/**				 * bottomY 结束位置				 * ballY 开始位置				 * duration 动画持续时间				 */
				let animation = uni.createAnimation({
					duration: duration || 400,
					timingFunction: 'ease-in',
				})
				console.log(bottomY)
				animation.translateY(bottomY - ballY).step(); // 动画效果		
				return animation;
			},
			// 滑动			
			noScroll(e) { // console.log(e)		
				console.log(e.detail.scrollTop)
				this.scrollY = e.detail.scrollTop + 20
				// 当滚动到顶部		
				if (this.scrollY < 0) {
					this.selectItem = 0
					this.mainCur = 0				
					return true
				}
				// 在中间部分滚动	
				for (let i = 0; i < this.listHeight.length - 1; i++) {
					let height = this.listHeight[i]
					// 思路 拿数组里面的开始、结束 值进行范围比较			
					if (this.scrollY > height.start && this.scrollY < height.end) {
						console.log('-----------合格----------')
						console.log(this.listHeight[i])
						this.selectItem = i
						this.mainCur = i			
					}
				}
			},

			// 计算每个右边区块的高度			
			calculateHeight() {
				console.log('计算右边');
				let list = this.rightNav
				let tabHeight = 0;
				for (let i = 0; i < list.length; i++) {
					const query = uni.createSelectorQuery().in(this);
					// console.log(query)			
					query.select("#main-" + i).boundingClientRect(data => {
		
					}).exec();
					let rightListSum = {
						showDel: false,
						delAnimation: false, // 删除动画			
						sum: 0,
					}
					this.rightListSum.push(rightListSum)
				}
				console.log(this.listHeight)
				console.log(this.rightListSum)
			}

		}

	}
</script>

<style>
	@import '../../common/uni.css';
	@import '../../common/main.css';

	page {
		background-color: #F7F7F7;
	}

	.shopicon {
		width: 130rpx;
		height: 130rpx;
	}

	.shoptt {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		margin-left: 32rpx;
		height: 130rpx;
		justify-content: space-between;
	}

	.shopname {
		width: 100%;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 24rpx;
	}

	.uni-status {
		width: 79rpx;
		text-align: center;
		border: 1rpx solid rgba(255, 80, 114, 1);
		opacity: 1;
		border-radius: 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: rgba(255, 80, 114, 1);
	}

	.opentime {
		margin-left: 5rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 24rpx;
		color: rgba(51, 51, 51, 1);
		flex-grow: 1;
	}

	.desknum {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 24rpx;
		color: rgba(153, 153, 153, 1);
	}

	.ball {

		height: 40rpx;

		width: 40rpx;

		background: #FF5072;

		border-radius: 50%;

		position: fixed;
		color: #FFFFFF;
		text-align: center;
		line-height: 40rpx;
		font-size: 18rpx;

	}
</style>
